@import './vw';
@import './common';

.content{
    z-index: 0;
    // padding: vw(90) 0 vw(96) 0;
    // margin-bottom: vw(96);
    padding:  vw(90) 0 0 0;
    height: 100vh;
    overflow-y: scroll;

    &::after{
        content: "";
        display: block;
        height: vw(96);
        visibility: hidden; /* 设置元素的可见性 hidden代表元素不可见 虽然元素不可见 但是在文档中的位置还占据着位置 */
    }
    // background-color: yellow;

    .banner{
        position: relative;
        img{
            width: 100%;
        }
        .mask-layer{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: vw(104);
            background-color: rgba(0,0,0,.3);
            >p{
                margin-top: vw(24);
                margin-bottom: vw(22);
                font-size: vw(26);
                text-align: center;
            }
            .mask-text{
                display: flex;
                justify-content: space-between;
                padding: 0 vw(20) 0 vw(30);
                font-size: vw(17);
                /* .circle{

                    .red{
                        width: vw(10);
                        height: vw(10);
                        margin-right: vw(8);
                    }
                    .white{
                        width: vw(55);
                        height: vw(10);
                    }
                } */
                
                .like{
                    display: flex;
                    align-items: center;

                    p{
                        display: flex;
                        align-items: center;
                    }
                    .love{
                        margin-right: vw(48);
                        img{
                            margin-right: vw(6);
                            width: vw(19);
                            height: vw(18);
                        }
                    }
                    .eye{
                        margin-right: vw(6);
                        font-size: vw(17);
                        img{
                            width: vw(21);
                            height: vw(12);
                        }
                    }
                }
                
            }
        }
    }
    .news{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .article{
            margin-top: vw(5);
            width: vw(584);
            height: vw(150);
            display: flex;
            justify-content: space-between;
            align-items: center;
            // border-bottom: 1px solid #e2e2e2;
            .text{
                width: vw(325);
                height: vw(119);
                display: flex;
                flex-wrap: wrap;
                align-content: space-around;
                justify-content: space-between;
                .p-up{
                    font-size: vw(25);
                    width: vw(320);
                    height: vw(58);
                }
                .p-below{
                    display: flex;
                    justify-content: space-between;
                    font-size: vw(18);
                    width: vw(66);
                    height: vw(20);
                    color: #c5c5c5;
                    img{
                        margin-right: 4px;
                        width: vw(19);
                        height: vw(19);
                    }
                    
                }
                span{
                    font-size: vw(20);
                    width: vw(175);
                    color: #c5c5c5;
                   
                }
            }
            .photo{
                overflow: hidden;
                img{
                    width: vw(202);
                    height: vw(119);
                }
            }
        }
        
        .article:nth-of-type(1){
            border-bottom: 1px solid #e2e2e2;
        }

        .article:nth-of-type(2){
            .text{
                span{
                    width: vw(140);
                }
            }
        }
        
        .article:nth-of-type(3){
            height: vw(26);
            width: 100%;
            background-color: #f5f5f5;
        }

        .article:nth-of-type(4){
            height: vw(250);
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            padding-top: vw(16);
            box-sizing: border-box;
            >p{
                // width: vw(550);
                height: vw(27);
                font-size: vw(25);
                letter-spacing: 1px;
            }
            .img3{
                margin: vw(20) 0 vw(12) 0 ;
                width: vw(584);
                height: vw(124);
                display: flex;
                justify-content: space-between;
                img{
                    width: vw(186);
                    height: vw(122);
                }
            }
            .bottom-box{
                display: flex;
                justify-content: space-between;
                width: vw(582);
                height: vw(30);
                line-height: vw(30);
                .l-box{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: vw(250);
                    // height: vw(26);
                    .p1{
                        // width: vw(94);
                        height: vw(26);
                        font-size: vw(20);
                        text-align: center;
                        line-height: vw(26);
                        img{
                            width: vw(20);
                            height: vw(18);
                        }
                    }
                    .p2{
                        // width: vw(60);
                        height: vw(16);
                        font-size: vw(16);
                        line-height: vw(16);
                        img{
                            height: vw(16);
                            line-height: vw(16);
                        }
                    }
                    .p3{
                        font-size: vw(16);
                        // width: vw(58);
                        height: vw(14);
                        line-height: vw(14);
                        img{
                            height: vw(16);
                            line-height: vw(16);
                        }
                    }
                }
                .r-box{
                    display: flex;
                    justify-content: flex-end;
                    width: vw(182);
                    text-align: center;
                    margin-top: vw(2);
                    // height: vw(20);
                    p{
                        height: vw(22);
                        line-height: vw(22);
                        font-size: vw(20);
                    }
                    span{
                        
                        height: vw(22);
                        line-height: vw(22);
                        font-size: vw(21);
                    }
                }
            }
        }
        .article:nth-of-type(7){
            height: vw(250);
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            box-sizing: border-box;
            >p{
                // width: vw(550);
                height: vw(27);
                font-size: vw(25);
                letter-spacing: 1px;
            }
            .img3{
                margin: vw(20) 0 vw(12) 0 ;
                width: vw(584);
                height: vw(124);
                display: flex;
                justify-content: space-between;
                img{
                    width: vw(186);
                    height: vw(122);
                }
            }
            .bottom-box{
                display: flex;
                justify-content: space-between;
                width: vw(582);
                height: vw(30);
                line-height: vw(30);
                .l-box{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: vw(250);
                    // height: vw(26);
                    .p1{
                        // width: vw(94);
                        height: vw(26);
                        font-size: vw(20);
                        text-align: center;
                        line-height: vw(26);
                        img{
                            width: vw(20);
                            height: vw(18);
                        }
                    }
                    .p2{
                        // width: vw(60);
                        height: vw(16);
                        font-size: vw(16);
                        line-height: vw(16);
                        img{
                            height: vw(16);
                            line-height: vw(16);
                        }
                    }
                    .p3{
                        font-size: vw(16);
                        // width: vw(58);
                        height: vw(14);
                        line-height: vw(14);
                        img{
                            height: vw(16);
                            line-height: vw(16);
                        }
                    }
                }
                .r-box{
                    display: flex;
                    justify-content: flex-end;
                    width: vw(182);
                    text-align: center;
                    margin-top: vw(2);
                    // height: vw(20);
                    p{
                        height: vw(22);
                        line-height: vw(22);
                        font-size: vw(20);
                    }
                    span{
                        
                        height: vw(22);
                        line-height: vw(22);
                        font-size: vw(21);
                    }
                }
            }
        }
        
    }
    .more{
        display: flex;
        justify-content: center;
        align-items: center;
        height: vw(75);
        padding-top: vw(20);
        box-sizing: border-box;
    }
}







    

